<template>
  <div class="app-container">
    <el-card>
      <el-select v-model="teamId" filterable placeholder="请选择或搜索" @change="changeTeam">
        <el-option
          v-for="item in teamSelect"
          :key="item.teamId"
          :label="item.teamId+'-'+item.title"
          :value="item.teamId"
        />
      </el-select>
      <el-button
        v-if="teamId!==''"
        type="primary"
        icon="el-icon-plus"
        style="margin-left: 1rem"
        @click="dialogVisible=true"
      >添加团队数据
      </el-button>
      <el-dialog
        title="团队信息"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :visible.sync="dialogVisible"
        top="3vh"
        width="90%"
        @close="refresh"
      >
        <mavon-editor
          ref="data"
          v-model="data"
          style="min-height: 65vh"
          :image-filter="uploadBefore"
          @imgAdd="addImage"
          @imgDel="delImage"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="insertTeamData">保存</el-button>
        </span>
      </el-dialog>
    </el-card>
    <el-card style="margin-top: 1rem">
      <el-table
        :data="tableData"
        stripe
      >
        <el-table-column prop="title" label="团队标题" />
        <el-table-column prop="nick" label="管理员" />
        <el-table-column prop="description" label="内容">
          <template slot-scope="scope">
            <span style="color: #0056d7">{{ scope.row.description+'……' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inDate" label="更新时间" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link icon="el-icon-edit" type="primary" @click="updateTeamData(scope.row.teamDataId)">修改</el-link>
            <el-link
              icon="el-icon-delete"
              style="margin-left: 0.5rem"
              type="danger"
              @click="deleteTeamData(scope.row.teamDataId)"
            >删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { deleteTeamData, descriptionById, insertTeamData, listSimpleTeam, listTeamDataAdmin } from '@/api/team'
import { getUserId } from '@/utils/auth'
import { addProblemImage, deleteProblemImage } from '@/api/problem'
import { Message } from 'element-ui'

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      data: '',
      tableData: [],
      dialogVisible: false,
      teamId: '',
      teamDataId: -1,
      teamSelect: [{ teamId: 17, title: '测试' }, { teamId: 18, title: '换行1' }, { teamId: 19, title: '换行2' }]
    }
  },
  created() {
    if (this.$route.params.teamId !== undefined) {
      this.teamId = this.$route.params.teamId
      this.listTeamDataAdmin()
    }
    this.listSimpleTeam()
  },
  methods: {
    listTeamDataAdmin() {
      listTeamDataAdmin({ 'teamId': this.teamId }).then(res => {
        this.tableData = res.data
      })
    },
    insertTeamData() {
      if (this.data === '') {
        this.$message.warning('还没输入内容呢')
      }
      const form = new FormData()
      form.set('teamId', this.teamId)
      form.set('userId', getUserId())
      form.set('description', this.data)
      form.set('teamDataId', this.teamDataId)
      insertTeamData(form).then(res => {
        this.$message.success(res.message)
        this.dialogVisible = false
        this.data = ''
      })
    },
    updateTeamData(teamDataId) {
      this.teamDataId = teamDataId
      this.descriptionById(teamDataId)
    },
    descriptionById(teamDataId) {
      descriptionById({ teamDataId: teamDataId }).then(res => {
        this.data = res.data
        this.dialogVisible = true
      })
    },
    deleteTeamData(teamDataId) {
      this.$confirm('此操作将永久删除团队数据，是否继续删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteTeamData({ teamDataId: teamDataId }).then(res => {
          if (res.data) {
            this.$message.success(res.message)
            this.listTeamDataAdmin()
          }
        })
      })
    },
    listSimpleTeam() {
      listSimpleTeam().then(res => {
        this.teamSelect = res.data
      })
    },
    changeTeam() {
      this.listTeamDataAdmin()
    },
    refresh() {
      this.listTeamDataAdmin()
    },
    addImage(pos, file) {
      const formData = new FormData()
      formData.append('image', file)
      addProblemImage(formData).then(res => {
        this.$refs['data'].$img2Url(pos, res.data)
      })
    },
    delImage(pos) {
      deleteProblemImage({ url: pos[0] }).then(res => {
        if (res.data) {
          Message.success({ showClose: true, message: '图片已删除' })
        }
      })
    },
    uploadBefore(file) {
      const af = file.name.split('.')[1]
      if (af !== 'jpg' && af !== 'jpeg' && af !== 'png' && af !== 'gif') {
        Message.error({ showClose: true, message: '图片格式限制为jpg,jpeg,png' })
        return false
      }
      if (file.size >= 20097152) {
        Message.error({ showClose: true, message: '图片最大为2M' })
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>

</style>
